<template>
  <div class="athlete-analysis">
    <!-- 顶部栏 -->
    <header class="top-bar">
      <div class="logo">
        <img src="@/assets/logo.svg" alt="logo" class="logo-icon">
      </div>
      <div class="title">
        运动员分析
      </div>
    </header>

    <!-- 主体内容 -->
    <main class="main-content">
      <!-- 左侧选项卡 -->
      <div class="sidebar">
        <!-- 数据管理选项 -->
        <div
          :class="['tab-item', { active: currentTab === 0 }]"
          @click="handleTabClick(tabs[0], 0)"
        >
          {{ tabs[0].name }}
          <span class="dropdown-icon">
            {{ isDataManagementExpanded ? '▼' : '▶' }}
          </span>
        </div>

        <!-- 数据管理的下拉菜单 -->
        <div v-if="isDataManagementExpanded" class="dropdown-menu">
          <div
            v-for="(subTab, subIndex) in tabs[0].children"
            :key="subIndex"
            :class="['sub-tab-item', { active: currentSubTab === subTab }]"
            @click="handleSubTabClick(subTab)"
          >
            {{ subTab.name }}
          </div>
        </div>

        <!-- 其他选项卡 -->
        <div
          v-for="(tab, index) in tabs.slice(1)"
          :key="index + 1"
          :class="['tab-item', { active: currentTab === index + 1 }]"
          @click="handleTabClick(tab, index + 1)"
        >
          {{ tab.name }}
        </div>
      </div>

      <!-- 右侧内容区 -->
      <div class="content-area">
        <component :is="currentSubTab ? currentSubTab.component : tabs[currentTab].component"></component>
      </div>
    </main>
  </div>
</template>

<style scoped>
/* 重置基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.athlete-analysis {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.top-bar {
  height: 10vh;
  background-color: #1e90ff;
  color: #000;
  display: flex;
  align-items: center;
  padding: 0 20px;
  position: relative;
}

.logo {
  position: absolute;
  left: 20px;
  display: flex;
  align-items: center;
}

.logo-icon {
  height: 40px;
  width: 40px;
}

.title {
  flex: 1;
  text-align: center;
  font-size: 1.5em;
  font-weight: bold;
}

.main-content {
  flex: 1;
  display: flex;
  width: 100%;
  height: 90vh;
}

.sidebar {
  width: 200px;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tab-item {
  padding: 15px 20px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.tab-item:hover {
  background-color: #e0e0e0;
}

.tab-item.active {
  background-color: #1e90ff;
  color: white;
}

.content-area {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  height: 100%;
  background-color: #ffffff;
}

/* 添加新样式 */
.dropdown-icon {
  float: right;
  margin-left: 10px;
}

.dropdown-menu {
  background-color: #f0f0f0;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 1;  /* 确保下拉菜单在其他元素之上 */
}

.sub-tab-item {
  padding: 12px 20px 12px 30px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.sub-tab-item:hover {
  background-color: #e0e0e0;
}

.sub-tab-item.active {
  background-color: #1e90ff;
  color: white;
}
</style>

<script setup>
import { ref } from 'vue'
import AthleteManagement from '../components/AthleteManagement.vue'
import NOCManagement from '../components/NOCManagement.vue'
import DataCleaning from '../components/DataCleaning.vue'
import ComponentOne from "@/components/ComponentOne.vue"
import ComponentTwo from "@/components/ComponentTwo.vue"
import ComponentThree from "@/components/ComponentThree.vue"
import ComponentFour from "@/components/ComponentFour.vue"
import ComponentFive from "@/components/ComponentFive.vue"
import { useRouter } from 'vue-router'
const router = useRouter()
// 当前选中的标签页
const currentTab = ref(0)  // 默认选中数据管理（第一个选项）
// 数据管理是否展开
const isDataManagementExpanded = ref(true)  // 默认展开

// 标签页配置
const tabs = [
  {
    name: '数据管理',
    isDropdown: true,
    children: [
      { name: '运动员信息管理', component: AthleteManagement },
      { name: '奥委会国家代码管理', component: NOCManagement },
      { name: '数据清洗融合', component: DataCleaning }
    ]
  },
  { name: '参赛人员变化分析', component: ComponentOne },
  { name: '男女年龄分布分析', component: ComponentTwo },
  { name: '身高体重变化分析', component: ComponentThree },
  { name: '国家奖牌分析', component: ComponentFour },
  { name: '国家强势项目分析', component: ComponentFive },
  { name: '数据大屏', path: '/data-dashboard' }
]

// 处理选项卡点击
const handleTabClick = (tab, index) => {
  console.log('更新后的 isDataManagementExpanded:', tab.path);
  if (tab.path) {
    router.push(tab.path)
    return
  }

  if (tab.isDropdown) {
    if (currentTab.value === index) {
      isDataManagementExpanded.value = !isDataManagementExpanded.value
    } else {
      currentTab.value = index
      isDataManagementExpanded.value = true
    }
  } else {
    currentTab.value = index
    currentSubTab.value = null
    isDataManagementExpanded.value = false
  }
}

// 当前选中的子选项
const currentSubTab = ref(tabs[0].children[0])  // 默认选中运动员信息管理

// 处理子选项点击
const handleSubTabClick = (subTab) => {
  console.log('handleSubTabClick called with:', subTab);
  currentSubTab.value = subTab;
  currentTab.value = 0;  // 修改为0，因为数据管理现在是第一个选项
}
</script>
